<script lang="ts">
import { ref } from 'vue'
import { useCascaderAreaData } from '@vant/area-data'
import type { CascaderOption } from 'vant'

export default {
  setup() {
    const show = ref(false)
    const fieldValue = ref('')
    const cascaderValue = ref('')
    const options = useCascaderAreaData()
    const onFinish = ({ selectedOptions }: CascaderOption) => {
      show.value = false
      fieldValue.value = selectedOptions.map((option) => option.text).join('/')
    }
    return {
      show,
      options,
      onFinish,
      fieldValue,
      cascaderValue,
    }
  },

  methods: {
    showArr() {
      console.log('---->', this.options)
    },
  },
}
</script>

<template>
  <van-field
    v-model="fieldValue"
    is-link
    readonly
    label="地区"
    placeholder="请选择所在地区"
    @click="show = true"
  />
  <van-popup v-model:show="show" round position="bottom">
    <van-cascader
      v-model="cascaderValue"
      title="请选择所在地区"
      :options="options"
      @close="show = false"
      @finish="onFinish"
    />
  </van-popup>

  <RouterView />
</template>

<style lang="scss" scoped></style>
